<template>
	<view class="lease_bill">
		<view class="bill-title u-m-t-24">
			<image src="@/bundle/static/images/billimg.png" mode="aspectFit"></image>
			<view class="row-between bill-bor">
				<view class="bill-payment">
					<text>待缴费用(元)</text>
					<text>{{pay_info.wait_pay_amount}}</text>
				</view>
				<view class="payment-byn">
					<!-- <button @click="payOut">去支付</button> -->
				</view>
			</view>
			<view class="bill-payabe">
				<view class="bill-payment">
					<text>已缴费用(元)</text>
					<text style="font-size: 32rpx;line-height: 32rpx;">{{pay_info.paid_amount}}</text>
				</view>
				<view class="bill-payment">
					<text>应缴费用(元)</text>
					<text style="font-size: 32rpx;line-height: 32rpx;">{{pay_info.total_amount}}</text>
				</view>
			</view>
		</view>
		<view class="container mt20">
			<lease-order-goods :image="orderDetail.lease_goods_images">
				<template #name>{{ orderDetail.goods_name }}</template>
				<!-- <template #name>{{ orderDetail.goods_name }}</template> -->
				<template #specs>
					<text class="mr10">规格：租完可还/买断</text>
					<!-- <text>{{item.order_goods.goods_item_str}}{{ getPeriodsUnit(item.periods_attribute) }}</text> -->
					<text>{{orderDetail.lease_goods_item_str}}</text>
				</template>
				<template #tenancy>
					<text class="mr10">租期：</text>
					<text>{{orderDetail.lease_start_date}}至{{orderDetail.lease_end_date}}</text>
				</template>
				<template #num>
					<text class="mr10">数量：</text>
					<text>{{orderDetail.goods_num}}</text>
				</template>
			</lease-order-goods>
			<view class="order-inst">
				<text>共{{orderDetail.goods_num}}件 ，</text><text>总费用 ￥</text><text>{{order_info.total_amount}}</text>
			</view>
		</view>
		<view class="container" v-if="bill.length>0">

			<view class="repayment-container row-between u-p-b-30 mb20" v-for="(item,index) in bill" :key="index"
				@click="upPay(item)">
				<view class="">
					<view class="amount-section row">
						<text class="amount">￥{{item.pay_amount}} </text> <text>></text>
						<view class="overdue-tag" v-if="item.status==2"><u-icon name="info-circle"
								color="#E95643"></u-icon>
							<text>已逾期{{item.overdue_days}}天</text>
						</view>
					</view>

					<view class="info-section mt30 row">
						<view class="installment-info" v-if="item.is_relet==1">续租</view>
						<view class="due-date"><text>【{{item.current_periods}}/{{item.periods}}期】</text>还款日:
							{{item.estimated_time}}
						</view>
					</view>
				</view>
				<view class="" v-if="item.status==0">
					<button class="pay-button"
						:disabled="order_info.order_status==6 || order_info.order_status==7 || order_info.order_status==8?true:false"
						v-if="item.pay_status==0"> 去支付</button>
					<button class="pay-button-on" v-else>{{item.pay_status==1?'支付完成':'已退款'}}</button>
				</view>
				<view class="" v-else-if="item.status==1">
					<button class="pay-button-on">{{item.pay_status==2?'已退款':'已还款'}}</button>
				</view>
				<view class="" v-else-if="item.status==2">
					<button class="pay-button"
						:disabled="order_info.order_status==6 || order_info.order_status==7 || order_info.order_status==8?true:false"
						v-if="item.pay_status==0"> 去支付</button>
				</view>

			</view>
		</view>
		<view class="container">
			<view class="bill-order row-between">
				<view class="">
					订单编号
				</view>
				<view class="" @click="copyText">
					<text>{{order_info.order_sn}}</text>
					<image src="@/bundle/static/images/billcopy.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="bill-order row-between mt30">
				<view class="">
					下单时间
				</view>
				<view class="">
					{{order_info.create_time}}
				</view>
			</view>
			<view class="bill-order row-between mt30">
				<view class="">
					订单状态
				</view>
				<view class="">
					{{order_info.order_status_desc}}
				</view>
			</view>
		</view>
		<view class="card-button row-between" v-if="is_buyup">
			<view class="meney-all">
				总计 <text>￥</text><text>{{buyup_amount}}</text>
			</view>
			<u-button style="flex: 1;" type="primary" shape="circle" @click="confirmReturn">确认买断</u-button>
		</view>
	</view>
</template>

<script>
	// import { data } from '../../../components/uview-ui/libs/mixin/mixin';
	import {
		orederBillLists,
		orederBuyup
	} from '@/api/lease.js'
	export default {
		data() {
			return {
				reletId: 0, //买断订单id
				orderDetail: {

				},
				pay_info: {},
				bill: [],
				order_info: {},
				is_buyup: true, //买断按钮
				buyup_amount: 0, //买断金额

			}
		},

		methods: {
			// 初始化数据
			indata() {
				orederBillLists({
					id: this.reletId
				}).then(res => {
					if (res.code != 1) return;
					this.orderDetail = res.data.goods_info;
					this.pay_info = res.data.pay_info;
					this.bill = res.data.bill;
					this.order_info = res.data.order_info;
					this.is_buyup = res.data.is_buyup;
					this.buyup_amount = res.data.buyup_amount;
				})
			},

			// 去支付idid
			upPay(item) {
				const id = item.id;
				if (item.status == 0 || item.status==2) { //去支付
					if (this.order_info.order_status == 6 || this.order_info.order_status == 7 || this.order_info.order_status == 8) return;
					uni.navigateTo({
						url: `/bundle/pages/lease_bill/laese_bill_stages?id=${id}`
					})

				} else { //付款详情
					uni.navigateTo({
						url: `/bundle/pages/lease_bill/laese_bill_classStages?id=${id}`

					})
				}


			},
			payOut() {
				const id = this.reletId;
				uni.navigateTo({
					url: `/bundle/pages/lease_bill/laese_bill_stages?id=${id}`
				})
			},


			// 复制地址
			copyText() {
				const text = this.order_info.order_sn;
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			//确认买断
			confirmReturn() {
				uni.showLoading({
					title: '正在提交...',
					mask: true
				});
				orederBuyup({
					action: 'submit',
					id: this.reletId,
				}).then(res => {
					if (res.code == 1) {
						this.$toast({
							title: res.msg,
							icon: 'success'
						});
						const data = res.data;
						uni.hideLoading();
						//跳转支付页面
						uni.redirectTo({
							url: `/pages/payment/payment?from=${data.from}&order_id=${data.order_id}`
						})

					}

				}).catch(() => {
					uni.hideLoading();
				})
			}
		},

		onLoad(options) {
			const id = options.id
			this.reletId = id;
		},

		onShow() {
			this.indata()
		}
	}
</script>

<style lang="scss" scoped>
	.lease_bill {
		padding: 0 24rpx 0 24rpx;
		padding-bottom: 100rpx;
	}

	.container {
		padding: 22px;
		margin-bottom: 20rpx;
		border-radius: 14rpx;
		background-color: #FFFFFF;

		image {
			border-radius: 12rpx;
		}
	}

	.bill-title {
		width: 100%;
		height: 308rpx;
		position: relative;
		padding: 30rpx;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.bill-bor {

			padding-bottom: 38rpx;
			border-bottom: 2rpx solid #ffffff1a;
			;

		}

		.payment-byn {

			z-index: 99;

			button {
				width: 156rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background: #7CA6E5;
				color: #ffffff;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 500;

			}
		}

	}

	.bill-payabe {

		display: flex;
		padding-top: 36rpx;
	}

	.bill-payment {
		margin-right: 100rpx;
		z-index: 99;

		>text:nth-child(1) {
			color: #ffffff99;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 24rpx;
			display: block;
			margin-bottom: 20rpx;
			z-index: 99;
		}

		>text:nth-child(2) {
			color: #FFFFFF;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 900;
			line-height: 48rpx;
			display: block;
			z-index: 99;
		}
	}

	.amount-section {
		color: #000000e6;
		font-size: 36rpx;
		font-style: normal;
		font-weight: 900;
		line-height: 36rpx;

		>text:nth-child(2) {
			color: #00000033;
			font-size: 32rpx;
			margin-left: 16rpx;
			font-weight: 400;
		}
	}

	.overdue-tag {
		padding: 14rpx 16rpx;
		border-radius: 16rpx;
		background: #e956431a;
		color: #e95643;

		font-size: 24rpx;
		font-style: normal;
		font-weight: 500;
		margin-left: 20rpx;

		text {
			margin-left: 6rpx;
		}
	}

	.info-section {
		color: #00000066;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 26rpx;
	}

	.installment-info {
		padding: 6rpx 8rpx;
		border-radius: 8rpx;
		border: 1rpx solid #C38B61;
		color: #C38B61;

		font-size: 22rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 22rpx;

	}

	.pay-button {
		// padding: 24rpx 40rpx;
		border-radius: 40rpx;
		background: #2482EE;
		width: 156rpx;
		height: 60rpx;
		text-align: center;
		color: #ffffff;

		font-size: 24rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 60rpx;
	}

	.bill-order {
		color: #00000099;

		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 28rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-left: 6rpx;
			vertical-align: text-top;
		}

		>view:nth-child(2) {
			color: #00000066;
		}
	}

	.repayment-container {
		border-bottom: 1rpx solid #00000011;
	}

	.pay-button-on {
		width: 156rpx;
		height: 60rpx;
		border-radius: 40rpx;
		background: #cccccc33;
		color: #00000066;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 60rpx;
	}

	.order-inst {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #00000011;
		color: #00000099;

		>text:nth-child(1) {
			font-size: 26rpx;
		}

		>text:nth-child(2) {
			font-size: 26rpx;
			color: #000000;
		}

		>text:nth-child(3) {
			font-size: 36rpx;
			color: #000000;
			font-weight: 700;

		}
	}

	.card-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #ffffff;
		padding: 30rpx;
		z-index: 1000;
		/* 确保不被其他元素覆盖 */
		left: 0;

	}


	.meney-all {
		color: #000000e6;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 28rpx;
		margin-right: 80rpx;


		>text:nth-child(1) {
			color: #e63333;
			font-size: 24rpx;
			margin-left: 8rpx;
		}

		>text:nth-child(2) {
			color: #e63333;
			font-size: 40rpx;
			font-style: normal;
			font-weight: 900;
			line-height: 40rpx;
		}
	}
</style>